<template>
  <div class="new-tab-page large">
    <div class="page-hd" v-if="currentTab !== '车场协议'">
      <div class="logo">
        <img src="../../../../assets/img/wechat-pay-fill.svg" alt="" />
        微信支付
        <span>开通微信支付</span>
      </div>
      <div class="hd-r" v-if="!$route.query.isPreview && !$route.query.isUpgrade && currentTab === '填写基本信息'">
        <a href="javascript:;" @click="changeCreateType">{{ showCurrentType }}</a>
      </div>
    </div>
    <div class="page-bd">
      <ul class="menu-tab" v-if="currentTab !== '车场协议' && !$route.query.isPreview">
        <li
          class="tab-item"
          v-for="(item, index) in tabItems"
          v-if="item !== '车场协议'"
          :key="item"
          :class="{ active: currentTab === item }"
        >
          {{ item }}
        </li>
      </ul>
      <BaseInfo
        v-if="currentTab === '填写基本信息' && refresh"
        :old-base-info="formData.baseInfo"
        :current-create-type="currentCreateType"
        @setFormData="setFormData"
        @goNextStep="goNextStep"
      ></BaseInfo>

      <Merchant
        v-if="currentTab === '填写商户信息'"
        :old-merchant-info="formData.merchantInfo"
        :current-create-type="currentCreateType"
        @setFormData="setFormData"
        @goBackSetp="goBackSetp"
        @goNextStep="goNextStep"
      >
      </Merchant>

      <BankAccount
        v-if="currentTab === '填写结算账户'"
        :old-bank-account-info="formData.bankAccountInfo"
        @setFormData="setFormData"
        @goBackSetp="goBackSetp"
        @goNextStep="goNextStep"
      >
      </BankAccount>

      <ConfirmInfo
        v-if="currentTab === '确认提交' && refresh"
        :current-create-type="currentCreateType"
        :form-data="formData"
        :id="id"
        @goBackSetp="goBackSetp"
        @goStep="goStep"
      ></ConfirmInfo>

      <Protocol @goStep="goStep" v-if="currentTab === '车场协议'"></Protocol>
    </div>
  </div>
</template>

<script src="./index.js"></script>

<style lang="less" scoped>
@import '../../../../assets/less/base/variables.less';
@import '../../../../assets/less/base/newTabPageCommom.less';

.page-hd {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  height: 50px;
  .logo {
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #848484;
    img {
      width: 24px;
      margin-right: 5px;
    }
    span {
      display: inline-block;
      height: 18px;
      line-height: 18px;
      padding-left: 10px;
      margin-left: 10px;
      border-left: 1px solid #000;
      font-size: 16px;
      color: #333333;
    }
  }

  .hd-r {
    height: 50px;
    line-height: 50px;
    a {
      color: @blue;
    }
    .bill-num {
      font-size: 14px;
      color: #666666;
      margin-left: 20px;
    }
  }
}

.page-bd {
  padding: 20px 40px 30px 40px;
}

.menu-tab {
  display: flex;
  overflow: hidden;
  .tab-item {
    flex: 1;
    height: 44px;
    line-height: 44px;
    background: #f6f8fa;
    font-size: 14px;
    color: #666666;
    text-align: center;
    cursor: pointer;
    position: relative;
    &.active {
      background: #00ae47;
      color: #fff;
    }
    &.active:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 22px 0 22px 18px;
      border-color: transparent transparent transparent #f6f8fa;
      z-index: 5;
    }

    &.active:after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 22px 0 22px 18px;
      border-color: transparent transparent transparent #00ae47;
      z-index: 5;
      transform: translateX(100%);
    }
    &:first-child {
      &.active::before {
        display: none;
      }
    }
  }
}
</style>
